<template>
  <div class="container">
    <a-card class="general-card" style="padding-top:4px">
      <a-row>
        <a-col :flex="1">
          <a-form :model="formModel" label-align="right">
            <a-row :gutter="16">
              <a-space direction="horizontal" :size="5">
                <a-form-item field="quarter" label-col-flex="70px" label="问题类别">
                  <a-select v-model="formModel.bigTypeNameList.value" :style="{ width: '240px' }" allow-clear multiple
                    :max-tag-count="1" placeholder="全部" allow-search :trigger-props="{ autoFitPopupMinWidth: true }">
                    <a-option :value="item.label" v-for="item in questionList1">{{ item.label }}</a-option>
                  </a-select>
                </a-form-item>

                <a-form-item field="quarter" label-col-flex="70px" label="突出问题">
                  <a-select v-model="formModel.prominentProblemList.value" :style="{ width: '240px' }" allow-clear multiple
                    :max-tag-count="1" placeholder="全部" allow-search :trigger-props="{ autoFitPopupMinWidth: true }">
                    <a-option :value="item" v-for="item in questionList">{{ item }}</a-option>
                  </a-select>
                </a-form-item>

                <a-form-item field="quarter" label-col-flex="70px" label="问题类型">
                  <a-select v-model="formModel.problemTypeList.value" :style="{ width: '240px' }" allow-clear multiple
                    :max-tag-count="1" placeholder="全部" allow-search :trigger-props="{ autoFitPopupMinWidth: true }">
                    <a-option :value="item" v-for="item in questionList2">{{ item }}</a-option>
                  </a-select>
                </a-form-item>

                <a-form-item field="department" label-col-flex="70px" label="责任单位">
                  <a-select v-model="formModel.department.value" placeholder="请输入责任单位" :style="{ width: '240px' }"
                    allow-clear :max-tag-count="1" multiple
                    allow-search>
                    <a-option v-for="item in departmentList" :value="item">{{ item }}</a-option>
                  </a-select>
                </a-form-item>

                <a-form-item label-col-flex="0px" label="">
                  <a-space direction="horizontal" :size="12">
                    <a-button status="success" @click="fetchData">
                      <template #icon>
                        <icon-search />
                      </template>
                      查询
                    </a-button>
                    <!-- <a-button type="primary" status="warning" @click="addDataShowFun">
                      <template #icon>
                        <icon-plus />
                      </template>
                      新建
                    </a-button> -->
                  </a-space>
                </a-form-item>

                <a-form-item label-col-flex="60px" label="截至日期" style="margin-left: 20px;">
                  <a-input v-model="endTime"></a-input>
                </a-form-item>
              </a-space>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <a-table :data="renderData" :columns="columns" :pagination="false" :scrollbar="true" :bordered="{cell:true}"
      :scroll="{ x: '1800px', y: '78vh' }" :sticky-header="0">
        <template #punished="{ rowIndex }"> 
          <table  v-if="renderData[rowIndex].task1List == null"
            class="tablecss" :style="{ minHeight: '70px' }">
            <tbody>
              <tr>
                <td v-if="renderData[rowIndex].task1Name != null && renderData[rowIndex].task1Name != ''">
                  {{renderData[rowIndex].task1Name}}</td>
                <td v-if="renderData[rowIndex].task2Name != null && renderData[rowIndex].task2Name != ''">
                  {{renderData[rowIndex].task2Name}}</td>
                <td v-if="renderData[rowIndex].task3Name != null && renderData[rowIndex].task3Name != ''">
                  {{renderData[rowIndex].task3Name}}</td>
                <td v-if="renderData[rowIndex].task4Name != null && renderData[rowIndex].task4Name != ''">
                  {{renderData[rowIndex].task4Name}}</td>
                <td v-if="renderData[rowIndex].task5Name != null && renderData[rowIndex].task5Name != ''">
                  {{renderData[rowIndex].task5Name}}</td>
                <td v-if="renderData[rowIndex].task6Name != null && renderData[rowIndex].task6Name != ''">
                  {{renderData[rowIndex].task6Name}}</td>
                <td v-if="renderData[rowIndex].task7Name != null && renderData[rowIndex].task7Name != ''">
                  {{renderData[rowIndex].task7Name}}</td>
              </tr>
                <tr>
                  <td v-if="renderData[rowIndex].task1Name != null && renderData[rowIndex].task1Name != ''">
                    {{renderData[rowIndex].task1Json}}</td>
                  <td v-if="renderData[rowIndex].task2Name != null && renderData[rowIndex].task2Name != ''">
                    {{renderData[rowIndex].task2Json}}</td>
                  <td v-if="renderData[rowIndex].task3Name != null && renderData[rowIndex].task3Name != ''">
                    {{renderData[rowIndex].task3Json}}</td>
                  <td v-if="renderData[rowIndex].task4Name != null && renderData[rowIndex].task4Name != ''">
                    {{renderData[rowIndex].task4Json}}</td>
                  <td v-if="renderData[rowIndex].task5Name != null && renderData[rowIndex].task5Name != ''">
                    {{renderData[rowIndex].task5Json}}</td>
                  <td v-if="renderData[rowIndex].task6Name != null && renderData[rowIndex].task6Name != ''">
                    {{renderData[rowIndex].task6Json}}</td>
                  <td v-if="renderData[rowIndex].task7Name != null && renderData[rowIndex].task7Name != ''">
                    {{renderData[rowIndex].task7Json}}</td>
                </tr>
            </tbody>
          </table>

          <table  v-if="renderData[rowIndex].task1List != null"
            class="tablecss" :style="{ minHeight: '155px' }">
            <!-- 头部区域 -->
            <tbody>
              <tr>
                <td :colspan="renderData[rowIndex].task1List.length" v-if="renderData[rowIndex].task1List != null && renderData[rowIndex].task1Name != ''">
                  {{renderData[rowIndex].task1Name}}</td>
                <td :colspan="renderData[rowIndex].task2List.length" v-if="renderData[rowIndex].task2List != null && renderData[rowIndex].task2Name != ''">
                  {{renderData[rowIndex].task2Name}}</td>
                <td :colspan="renderData[rowIndex].task3List.length" v-if="renderData[rowIndex].task3List != null && renderData[rowIndex].task3Name != ''">
                  {{renderData[rowIndex].task3Name}}</td>
                <td :colspan="renderData[rowIndex].task4List.length" v-if="renderData[rowIndex].task4List != null && renderData[rowIndex].task4Name != ''">
                  {{renderData[rowIndex].task4Name}}</td>
                <td :colspan="renderData[rowIndex].task5List.length" v-if="renderData[rowIndex].task5List != null && renderData[rowIndex].task5Name != ''">
                  {{renderData[rowIndex].task5Name}}</td>
                <td :colspan="renderData[rowIndex].task6List.length" v-if="renderData[rowIndex].task6List != null && renderData[rowIndex].task6Name != ''">
                  {{renderData[rowIndex].task6Name}}</td>
                <td :colspan="renderData[rowIndex].task7List.length" v-if="renderData[rowIndex].task7List != null && renderData[rowIndex].task7Name != ''">
                  {{renderData[rowIndex].task7Name}}</td>
              </tr>
              <tr>
                  <td v-for="item2 in renderData[rowIndex].task1List">{{item2.name}}</td>
                  <td v-for="item2 in renderData[rowIndex].task2List">{{item2.name}}</td>
                  <td v-for="item2 in renderData[rowIndex].task3List">{{item2.name}}</td>
                  <td v-for="item2 in renderData[rowIndex].task4List">{{item2.name}}</td>
                  <td v-for="item2 in renderData[rowIndex].task5List">{{item2.name}}</td>
                  <td v-for="item2 in renderData[rowIndex].task6List">{{item2.name}}</td>
                  <td v-for="item2 in renderData[rowIndex].task7List">{{item2.name}}</td>
              </tr>
              
              <tr>
                <td v-for="item2 in renderData[rowIndex].task1List">{{item2.value}}</td>
                <td v-for="item2 in renderData[rowIndex].task2List">{{item2.value}}</td>
                <td v-for="item2 in renderData[rowIndex].task3List">{{item2.value}}</td>
                <td v-for="item2 in renderData[rowIndex].task4List">{{item2.value}}</td>
                <td v-for="item2 in renderData[rowIndex].task5List">{{item2.value}}</td>
                <td v-for="item2 in renderData[rowIndex].task6List">{{item2.value}}</td>
                <td v-for="item2 in renderData[rowIndex].task7List">{{item2.value}}</td>
              </tr>
            </tbody>
          </table>

        </template>
        <template #established="{ rowIndex }"> 
          <div style="white-space: pre-wrap;word-break: break-all;text-align: left;">
            {{ renderData[rowIndex].establishedText }}
          </div>
        </template>
        <template #action="{ rowIndex }">
          <a-button type="outline" status="success" shape="round" size="mini" @click="editItem(renderData[rowIndex])" style="margin-bottom: 3px;">
            <template #default>更新</template>
          </a-button>
        </template>
      </a-table>
    
    </a-card>

    <!-- 侧边修改数据 -->
    <a-drawer :width="860" :visible="editvisible" @before-ok="handleEditOk" @cancel="handleEditCancel" unmountOnClose>
      <template #title>
        更新数据
      </template>
      <div>
        <!-- layout="vertical" -->
        <a-form :model="editDataForm" label-align="right">
          <p>基本数据</p>
          <a-row>

            <a-col :span="24">
              <a-form-item field="issueCategory" label-col-flex="120px" label="问题类别" required>
                <a-checkbox-group v-model="editDataForm.issueCategory.value" readonly disabled
                  :options="questionList1" />
              </a-form-item>
            </a-col>
            

            <a-col :span="24">
              <a-form-item field="prominentIssue" label-col-flex="120px" label="突出问题" required>
                <a-select v-model="editDataForm.prominentIssue.value" :style="{ width: '240px' }" allow-clear disabled
                    placeholder="全部" allow-search :trigger-props="{ autoFitPopupMinWidth: true }">
                    <a-option :value="item" v-for="item in questionList">{{ item }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            
            <a-col :span="24">
              <a-form-item field="issueType" label-col-flex="120px" label="问题类型" required>
                <a-select v-model="editDataForm.issueType.value" :style="{ width: '240px' }" allow-clear disabled
                    placeholder="全部" allow-search :trigger-props="{ autoFitPopupMinWidth: true }">
                    <a-option :value="item" v-for="item in questionList2">{{ item }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            

            <a-col :span="24">
              <a-form-item field="leadingUnit" label-col-flex="120px" label="牵头领导" required>
                <a-tag
                    v-for="(tag, index) of leadingUnitList"
                    :key="tag"
                    style="margin-right: 10px;"
                  >
                    {{ tag }}
                  </a-tag>
                  <!-- <a-tag
                    v-for="(tag, index) of leadingUnitList"
                    :key="tag"
                    :closable="index !== 0"
                    style="margin-right: 10px;"
                    @close="handleRemove1(tag)"
                  >
                    {{ tag }}
                  </a-tag> -->
                  <!-- <a-input
                    v-if="showInput1"
                    ref="inputRef"
                    :style="{ width: '120px',marginRight: '10px'}"
                    size="mini"
                    v-model.trim="inputVal1"
                    @keyup.enter="handleAdd1"
                    @blur="handleAdd1"
                  />
                  <a-tag
                    v-else
                    :style="{
                      width: '120px',
                      marginRight: '10px',
                      backgroundColor: 'var(--color-fill-2)',
                      border: '1px dashed var(--color-fill-3)',
                      cursor: 'pointer',
                    }"
                    @click="handleEdit1"
                  >
                    <template #icon>
                      <icon-plus />
                    </template>
                    新增领导
                  </a-tag> -->


              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item field="leadingLeader" label-col-flex="120px" label="牵头单位" required>
                <a-tag
                    v-for="(tag, index) of leadingDepartList"
                    :key="tag"
                    style="margin-right: 10px;"
                  >
                    {{ tag }}
                  </a-tag>
                
                  <!-- <a-input
                    v-if="showInput2"
                    ref="inputRef"
                    :style="{ width: '120px',marginRight: '10px'}"
                    size="mini"
                    disabled
                    v-model.trim="inputVal2"
                    @keyup.enter="handleAdd2"
                    @blur="handleAdd2"
                  />
                  <a-tag
                    v-else
                    :style="{
                      width: '120px',
                      marginRight: '10px',
                      backgroundColor: 'var(--color-fill-2)',
                      border: '1px dashed var(--color-fill-3)',
                      cursor: 'pointer',
                    }"
                    @click="handleEdit2"
                  >
                    <template #icon>
                      <icon-plus />
                    </template>
                    新增单位
                  </a-tag> -->

              </a-form-item>
            </a-col>
            <a-col>
              <p>整改工作任务及进展</p>
            </a-col>
            <div v-if="editDataForm.task1Json !=null && editDataForm.task1Json.value.length>15">
              <a-col :span="24" v-if="editDataForm.task1Name.value != null && editDataForm.task1Name.value != ''">
                  <a-form-item field="huangGangId" label-col-flex="180px" :label="editDataForm.task1Name.value">
                      <a-row v-for="(item) in editDataForm.task1List.value">
                        <a-col style="display: flex;">
                            <p style="min-width: 60px;height: 30px;line-height: 30px;margin: 0;text-align: center;">{{ item.name }}</p>
                            <a-input v-model="item.value" size="small" :style="{ width: '120px',height:'30px'}" 
                              :disabled=" item.name.indexOf('任务数')!= -1 || item.name.indexOf('目标数')!= -1"
                            />
                        </a-col>
                      </a-row>
                  </a-form-item>
              </a-col>
              <a-col :span="24" v-if="editDataForm.task2Name.value != null && editDataForm.task2Name.value != ''">
                  <a-form-item field="huangGangId" label-col-flex="180px" :label="editDataForm.task2Name.value">
                      <a-row v-for="(item) in editDataForm.task2List.value">
                        <a-col style="display: flex;">
                            <p style="min-width: 60px;height: 30px;line-height: 30px;margin: 0;text-align: center;">{{ item.name }}</p>
                            <a-input v-model="item.value" size="small" :style="{ width: '120px',height:'30px'}" 
                            :disabled=" item.name.indexOf('任务数')!= -1 || item.name.indexOf('目标数')!= -1"/>
                        </a-col>
                      </a-row>
                  </a-form-item>
              </a-col>
              <a-col :span="24" v-if="editDataForm.task3Name.value != null && editDataForm.task3Name.value != ''">
                  <a-form-item field="huangGangId" label-col-flex="180px" :label="editDataForm.task3Name.value">
                      <a-row v-for="(item) in editDataForm.task3List.value">
                        <a-col style="display: flex;">
                            <p style="min-width: 60px;height: 30px;line-height: 30px;margin: 0;text-align: center;">{{ item.name }}</p>
                            <a-input v-model="item.value" size="small" :style="{ width: '120px',height:'30px'}" 
                            :disabled=" item.name.indexOf('任务数')!= -1 || item.name.indexOf('目标数')!= -1"/>
                        </a-col>
                      </a-row>
                  </a-form-item>
              </a-col>
              <a-col :span="24" v-if="editDataForm.task4Name.value != null && editDataForm.task4Name.value != ''">
                  <a-form-item field="huangGangId" label-col-flex="180px" :label="editDataForm.task4Name.value">
                      <a-row v-for="(item) in editDataForm.task4List.value">
                        <a-col style="display: flex;">
                            <p style="min-width: 60px;height: 30px;line-height: 30px;margin: 0;text-align: center;">{{ item.name }}</p>
                            <a-input v-model="item.value" size="small" :style="{ width: '120px',height:'30px'}" 
                            :disabled=" item.name.indexOf('任务数')!= -1 || item.name.indexOf('目标数')!= -1"/>
                        </a-col>
                      </a-row>
                  </a-form-item>
              </a-col>

            </div>
            <div v-else>
              <a-col :span="24" v-if="editDataForm.task1Name.value != null && editDataForm.task1Name.value != ''">
                  <a-form-item field="huangGangId" label-col-flex="180px" :label="editDataForm.task1Name.value">
                    <a-input v-model="editDataForm.task1Json.value" :style="{ width: '400px' }" 
                    :disabled="editDataForm.task1Name.value == '信访问题存量数'"/>
                  </a-form-item>
              </a-col>
              <a-col :span="24" v-if="editDataForm.task2Name.value != null && editDataForm.task2Name.value != ''">
                  <a-form-item field="huangGangId" label-col-flex="180px" :label="editDataForm.task2Name.value">
                    <a-input v-model="editDataForm.task2Json.value" :style="{ width: '400px' }" @change="changeTask2Value1" />
                  </a-form-item>
              </a-col>
              <a-col :span="24" v-if="editDataForm.task3Name.value != null && editDataForm.task3Name.value != ''">
                  <a-form-item field="huangGangId" label-col-flex="180px" :label="editDataForm.task3Name.value">
                    <a-input v-model="editDataForm.task3Json.value" :style="{ width: '400px' }" />
                  </a-form-item>
              </a-col>
              <a-col :span="24" v-if="editDataForm.task4Name.value != null && editDataForm.task4Name.value != ''">
                  <a-form-item field="huangGangId" label-col-flex="180px" :label="editDataForm.task4Name.value">
                    <a-input v-model="editDataForm.task4Json.value" :style="{ width: '400px' }" />
                  </a-form-item>
              </a-col>
              <a-col :span="24" v-if="editDataForm.task5Name.value != null && editDataForm.task5Name.value != ''">
                  <a-form-item field="huangGangId" label-col-flex="180px" :label="editDataForm.task5Name.value">
                    <a-input v-model="editDataForm.task5Json.value" :style="{ width: '400px' }" />
                  </a-form-item>
              </a-col>
              <a-col :span="24" v-if="editDataForm.task6Name.value != null && editDataForm.task6Name.value != ''">
                  <a-form-item field="huangGangId" label-col-flex="180px" :label="editDataForm.task6Name.value">
                    <a-input v-model="editDataForm.task6Json.value" :style="{ width: '400px' }" />
                  </a-form-item>
              </a-col>
              <a-col :span="24" v-if="editDataForm.task7Name.value != null && editDataForm.task7Name.value != ''">
                  <a-form-item field="huangGangId" label-col-flex="180px" :label="editDataForm.task7Name.value">
                    <a-input v-model="editDataForm.task7Json.value" :style="{ width: '400px' }" />
                  </a-form-item>
              </a-col>
            </div>
            


            <!-- 自查自纠发现问题数	已销号	整治中 -->
            <a-col :span="24">
              <a-form-item field="accountabilityCount" label-col-flex="120px" label="追责问责(人数)" required>
                <a-input-number v-model="editDataForm.accountabilityCount.value" :precision="0" :style="{ width: '300px' }" />
              </a-form-item>
            </a-col>

            <!-- //建立制度数 -->
            <a-col :span="24">
              <a-form-item field="regulationsPlanCount" label-col-flex="120px" label="建章立制" required>
                <a-input-number v-model="editDataForm.regulationsPlanCount.value" disabled :precision="0" :style="{ width: '300px' }"  @change="changeEstablishedSystems"/>
              </a-form-item>
            </a-col>
            <div style="display: flex;">
              <a-form-item field="establishedNameList" label-col-flex="120px" label="建立制度名称" required style="width: 120px;">
              </a-form-item>
              <div style="flex: 1;margin-left: 15px;margin-bottom: 15px;">
                <a-row v-for="(item,index) in editDataForm.establishedNameList.value" style="width: 100%;">
                  <a-col>
                    <a-input 
                      :key="index"
                      placeholder="请填写每个制度对应的名称"
                      v-model="item.name" :style="{ width: '300px' , marginTop:'5px' }" />
                    <a-checkbox v-model="item.checked">是否完成</a-checkbox>
                  </a-col>
                </a-row>
              </div>
            </div>

            <a-col :span="24">
              <a-form-item field="topThreeEvaluation1" label-col-flex="120px" label="工作评价前三名" required>
                <a-select v-model="editDataForm.topThreeEvaluation1.value" :style="{ width: '100px' }">
                  <a-option :value="item" v-for="item in areaList">{{ item }}</a-option>
                </a-select>
                <a-select v-model="editDataForm.topThreeEvaluation2.value" :style="{ width: '100px',marginLeft:'10px' }">
                  <a-option :value="item" v-for="item in areaList">{{ item }}</a-option>
                </a-select>
                <a-select v-model="editDataForm.topThreeEvaluation3.value" :style="{ width: '100px',marginLeft:'10px' }">
                  <a-option :value="item" v-for="item in areaList">{{ item }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item field="bottomThreeEvaluation1" label-col-flex="120px" label="工作评价后三名" required>
                <a-select v-model="editDataForm.bottomThreeEvaluation1.value" :style="{ width: '100px' }">
                  <a-option :value="item" v-for="item in areaList">{{ item }}</a-option>
                </a-select>
                <a-select v-model="editDataForm.bottomThreeEvaluation2.value" :style="{ width: '100px',marginLeft:'10px' }">
                  <a-option :value="item" v-for="item in areaList">{{ item }}</a-option>
                </a-select>
                <a-select v-model="editDataForm.bottomThreeEvaluation3.value" :style="{ width: '100px',marginLeft:'10px' }">
                  <a-option :value="item" v-for="item in areaList">{{ item }}</a-option>
                </a-select>

              </a-form-item>
            </a-col>

            <!-- //查处违纪违法案件数	组织处理人数	纪律处分人数 -->

            <a-col :span="24">
              <a-form-item field="remarks" label-col-flex="120px" label="备注">
                <a-input v-model="editDataForm.remarks.value"  :style="{ width: '460px' }" />
              </a-form-item>
            </a-col>
            
          </a-row>
         
        </a-form>
      </div>
    </a-drawer>


  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { Modal, Message } from '@arco-design/web-vue';
import { postRequest, uploadFileRequest } from '@/api/common';
import { baseURL } from '@/api/base';
import { add } from 'lodash';

const formModel = {
  department: ref<any>(""),
  bigTypeNameList: ref<any[]>([]),
  prominentProblemList: ref<any[]>([]),
  problemTypeList: ref<any[]>([]),
  isTopTen: ref(""),
  dateRange: ref<any[]>([]),
  dateRange2: ref<any[]>([]),
};
const format = (options:any) => {
  const labels = options.map(option => option.label);
  return labels[0]
}
const changeEstablishedSystems = (val:any) =>{
    editDataForm.establishedNameList.value = [];
    for(let i=0;i<val;i++){
      editDataForm.establishedNameList.value.push({
        label: ''
      })
    }
  }

const endTime = ref("2025年7月9日");
const leadingUnitList = ref<any[]>([]);
const inputRef = ref(null);
const showInput1 = ref(false);
const inputVal1 = ref('');

const handleEdit1 = () => {
      showInput1.value = true;
      
};

const changeTask2Value1 = (val) =>{
  console.log(val);
  editDataForm.task3Json.value = (val/Number(editDataForm.task1Json.value)  * 100).toFixed(2) +"%";

}

const handleAdd1 = () => {
  if (inputVal1.value) {
    leadingUnitList.value.push(inputVal1.value as any);
    inputVal1.value = '';
  }
  showInput1.value = false;
};
const handleRemove1 = (key) => {
  leadingUnitList.value = leadingUnitList.value.filter((tag) => tag !== key);
};

const leadingDepartList = ref<any[]>([]);
const inputRef2 = ref(null);
const showInput2 = ref(false);
const inputVal2 = ref('');

const handleEdit2 = () => {
      showInput2.value = true;
};

const handleAdd2 = () => {
  if (inputVal2.value) {
    leadingDepartList.value.push(inputVal2.value as any);
    inputVal2.value = '';
  }
  showInput1.value = false;
};
const handleRemove2 = (key) => {
  leadingDepartList.value = leadingDepartList.value.filter((tag) => tag !== key);
};


const areaList :any[] = ['黄州区', '团风县', '红安县', '麻城市', '罗田县', '英山县', '浠水县', '蕲春县', '武穴市', '黄梅县', '龙感湖', '白莲河'];

const fieldNames = {value: 'value', label: 'label'}
const questionList:any[] = ["信访积案化解", "后进村整顿", "行政村布局调整后半篇文章", "矛盾纠纷实质性化解", "道路交通安全综合治理", "执行难破产难", "不担当不作为", "违规吃喝", "违规收送礼品礼金", "违规打牌和赌博", "酒驾醉驾", "中小学校园餐", "公共交通服务质量不优", "物业服务履约不到位、侵占业主公共收益", "大气污染", "12345 投诉办理质效不高", "新就业群体急难愁盼", "民生案件破案", "命案防范", "未成年人保护和预防犯罪", "精神障碍患者服务管理", "电信网络诈骗打击", "禁毒工作", "高额彩礼", "外籍新娘管理服务", "失能失智老人日间照护", "留守妇女就业", "农村留守儿童假期托管", "农村慢性病管理心电一张网", "中小学生午休趴睡变躺睡", "市区老年人娱乐活动和场所建设"];
const questionList1 :any[] = [
 {
    label: "工作推进类",
    value: "工作推进类"
  },
  {
    label: "存量销号类",
    value: "存量销号类"
  },
  {
    label: "发现查处类",
    value: "发现查处类"
  },
  {
    label: "试点建制类",
    value: "试点建制类"
  }
];
const questionList2:any[] = ["十大集中攻坚行动", "社会领域突出问题", "政法领域突出问题", "民生领域突出问题"];


let totalSize = ref(10);

// 
const toLeadVisible = ref(false);
//fileFlag
const upLoadFileFlag = ref(false);
//toLeadForm 上传文件
let toLeadForm: FormData = new FormData();

const spanMethod = ({rowIndex, columnIndex}) =>{
  if(rowIndex == 0 && columnIndex == 0){
    return {
        colspan: 2
      }
  }
}

const columns:any = reactive([
  {
      title: '序号',
      dataIndex:'id',
      align: 'center',
      width: 42,
    },
    {
      title: '突出问题',
      dataIndex:'prominentIssue',
      align: 'center',
      width: 60,
    },
    {
      title: '问题类型',
      dataIndex:'issueType',
      align: 'center',
      width: 60,
    },
    {
      title: '问题类别',
      dataIndex:'issueCategory',
      align: 'center',
      width: 60,
    },
    {
      title: ' 牵头 领导',
      dataIndex:'leadingLeader',
      align: 'center',
      slotName: 'leadingLeader',
      width: 45,
    },
    {
      title: ' 牵头 单位',
      dataIndex:'leadingUnit',
      align: 'center',
      width: 50,
    },
    {
      title: '整改工作任务及进展',
      dataIndex:'disciplinaryPunishedPersons',
      align: 'center',
      slotName: 'punished',
      width: 540,
    },
    {
      title: '追责问责(人数)',
      dataIndex:'accountabilityCount',
      align: 'center',
      width: 60,
    },
    {
      title: '建章立制',
      dataIndex:'regulationsPlanCount',
      align: 'center',
      width: 100,
      children:[
          {
            title: '计划',
            dataIndex:'regulationsPlanCount',
            align: 'center',
            width: 50,
          },
          {
            title: '完成',
            dataIndex:'regulationsCompletedCount',
            align: 'center',
            width: 50,
          }
        ]
    },
    {
      title: '制度清单',
      dataIndex:'regulationsPlanJson',
      align: 'center',
      slotName: 'established',
      width: 240,
    },
    {
      title: '工作评价',
      dataIndex:'topThreeEvaluation',
      align: 'center',
      width: 90,
      children:[
          {
            title: '前三名',
            dataIndex:'topThreeEvaluation',
            align: 'center',
            slotName: 'topthree',
            width: 45,
          },
          {
            title: '后三名',
            dataIndex:'bottomThreeEvaluation',
            align: 'center',
            slotName: 'bottomthree',
            width: 45,
          }
        ]
    },
    {
      title: '备注',
      dataIndex:'remarks',
      align: 'center',
      slotName: 'remark',
      width: 95,
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      width: 80,
      fixed: 'right',
      slotName: 'action'
    },
  ]);

const leadAddShow = () => {
    toLeadVisible.value = true;
    toLeadForm = new FormData();
    upLoadFileFlag.value = false;
}
const onFileChange = (fileList: any) => {
  console.log(fileList);
  if(fileList!=null && fileList.length>0){
    upLoadFileFlag.value = true; //by guo 2020-8-4-15:18添加
    toLeadForm = new FormData();
    toLeadForm.append("file", fileList[0].file);
    toLeadForm.append("userName", localStorage.getItem("userName") as any);
  }else{
    upLoadFileFlag.value = false; //by guo 2020-8-4-15:18添加
    toLeadForm = new FormData();
  }
};
const toLeadOk = async () => {
    if (upLoadFileFlag.value) {
      let res = await uploadFileRequest("dsms/jyData/importSocialData", toLeadForm);
        if (res.data.code == 200){
            fetchData();
            Message.success(res.data.message+" "+res.data.result+"条")
        }else{
            Message.error(res.data.message)
        }
    }else{
        Message.error("请选择文件");
        toLeadVisible.value = true;
    }
};

const editvisible = ref(false);
const editDataForm = { 
  id: ref(0),
  prominentIssue: ref(""),
  issueType: ref(""),
  establishedSystems: ref<any[]>([]),
  issueCategory: ref<any[]>([]),
  task1List: ref<any[]>([]),
  task2List: ref<any[]>([]),
  task3List: ref<any[]>([]),
  task4List: ref<any[]>([]),
  leadingLeader: ref(""),
  leadingUnit: ref(""),
  task1Name: ref(""),
  task1Json: ref<string>(""),
  task2Name: ref(""),
  task2Json: ref(""),
  task3Name: ref(""),
  task3Json: ref(""),
  task4Name: ref(""),
  task4Json: ref(""),
  task5Name: ref(""),
  task5Json: ref(""),
  task6Name: ref(""),
  task6Json: ref(""),
  task7Name: ref(""),
  task7Json: ref(""),
  topThreeEvaluation1: ref(""),
  topThreeEvaluation2: ref(""),
  topThreeEvaluation3: ref(""),
  bottomThreeEvaluation1: ref(""),
  bottomThreeEvaluation2: ref(""),
  bottomThreeEvaluation3: ref(""),
  accountabilityCount: ref(0),
  regulationsPlanCount: ref(0),
  regulationsCompletedCount:ref(""),
  regulationsPlanJson: ref(""),
  topThreeEvaluation: ref(""),
  bottomThreeEvaluation: ref(""),
  remarks: ref(""),
  reporter: ref(""),
  establishedName: ref(""),
  establishedJson: ref(""),
  establishedNameList: ref<any[]>([]),
}

let departmentList = ref<any[]>([]);
const fetchDepartment = async () => { 
  departmentList.value = ["市信访局", "市委社会工作部", "市委政法委", "市交通运输局", "市公安局", "市法院", "市纪委监委机关", "市教育局", "市住房和城市更新局", "市生态环境局", "市政数局", "市委宣传部", "市民政局", "市卫健委"];
};
fetchDepartment();

const department = localStorage.getItem("department");
// formModel.department.value = department as string;
// addDataForm.department.value = department as string;
// addDataForm.responsibleLeader.value = localStorage.getItem("project") as string;

console.log(department);

const handleEditCancel = () => {
  editvisible.value = false;
}

const handleEditOk = async() => { 

  console.log(editDataForm.establishedNameList.value);
  console.log(editDataForm);
  if(editDataForm.task1List.value != null && editDataForm.task1List.value.length>0){
    editDataForm.task1Json.value = JSON.stringify(editDataForm.task1List.value);
  }
  if(editDataForm.task2List.value != null && editDataForm.task2List.value.length>0){
    editDataForm.task2Json.value = JSON.stringify(editDataForm.task2List.value);
  }
  if(editDataForm.task3List.value != null && editDataForm.task3List.value.length>0){
    editDataForm.task3Json.value = JSON.stringify(editDataForm.task3List.value);
  }
  if(editDataForm.task4List.value != null && editDataForm.task4List.value.length>0){
    editDataForm.task4Json.value = JSON.stringify(editDataForm.task4List.value);
  }
  console.log(editDataForm.task1Json.value);

  if(editDataForm.establishedNameList.value.length>0){
    let establishedJson:any[] = [];
      editDataForm.establishedNameList.value.forEach(item=>{
        console.log(item.checked);
        establishedJson.push({
          name:item.name,
          status: item.checked?"1":"0"
        })
      })
    console.log(establishedJson);
    editDataForm.establishedJson.value = JSON.stringify(establishedJson);
  }

  let params = {
    id: editDataForm.id,
    task2Json: editDataForm.task2Json.value,
    task3Json: editDataForm.task3Json.value,
    task4Json: editDataForm.task4Json.value,
    task5Json: editDataForm.task5Json.value,
    task6Json: editDataForm.task6Json.value,
    task7Json: editDataForm.task7Json.value,
    accountabilityCount: editDataForm.accountabilityCount.value,
    regulationsPlanJson: editDataForm.establishedJson.value,
    regulationsPlanCount: editDataForm.regulationsPlanCount.value,
    remarks: editDataForm.remarks.value,
    topThreeEvaluation: editDataForm.topThreeEvaluation1.value+"\n"+ editDataForm.topThreeEvaluation2.value + "\n"+ editDataForm.topThreeEvaluation3.value,
    bottomThreeEvaluation: editDataForm.bottomThreeEvaluation1.value+"\n"+ editDataForm.bottomThreeEvaluation2.value + "\n"+ editDataForm.bottomThreeEvaluation3.value,
  }
  postRequest("dsms/jyReport/updateData",params).then(res=>{
    Message.success("更新成功");
                fetchData();
                editvisible.value = false;
           })

}



const editItem = async(record:any) => { 
  editvisible.value = true;
  editDataForm.id = record.id;
  editDataForm.issueCategory.value = [record.issueCategory];
  editDataForm.prominentIssue.value = record.prominentIssue;
  editDataForm.issueType.value = record.issueType;
  console.log(record.leadingLeader);
  leadingUnitList.value = record.leadingLeader.split('\n');
  leadingDepartList.value = record.leadingUnit.split('\n');
  editDataForm.accountabilityCount.value = record.accountabilityCount;
  editDataForm.regulationsPlanCount.value = record.regulationsPlanCount;
  editDataForm.regulationsPlanCount.value = record.regulationsPlanCount;
  editDataForm.establishedNameList.value = [];
  editDataForm.establishedJson.value = record.establishedJson;
  // for(let i=0;i<editDataForm.regulationsPlanCount.value;i++){
  //   editDataForm.establishedNameList.value.push({
  //     label: ''
  //   })
  // }
  if(record.regulationsPlanJson !=null &&record.regulationsPlanJson.length>10 && record.regulationsPlanJson.indexOf("name") != -1){
      editDataForm.establishedNameList.value = JSON.parse(record.regulationsPlanJson);
      editDataForm.establishedNameList.value.forEach(item=>{
        item.checked = ref(item.status == 1)
      })
      console.log(editDataForm.establishedNameList.value);
  }
  editDataForm.topThreeEvaluation1.value = record.topThreeEvaluation.split('\n')[0];
  editDataForm.topThreeEvaluation2.value = record.topThreeEvaluation.split('\n')[1];
  editDataForm.topThreeEvaluation3.value = record.topThreeEvaluation.split('\n')[2];
  editDataForm.bottomThreeEvaluation1.value = record.bottomThreeEvaluation.split('\n')[0];
  editDataForm.bottomThreeEvaluation2.value = record.bottomThreeEvaluation.split('\n')[1];
  editDataForm.bottomThreeEvaluation3.value = record.bottomThreeEvaluation.split('\n')[2];
  editDataForm.remarks.value = record.remarks;
  console.log(editDataForm.task1List.value);

  editDataForm.task1List.value = record.task1List;
  editDataForm.task2List.value = record.task2List;
  editDataForm.task3List.value = record.task3List;
  editDataForm.task4List.value = record.task4List;

  editDataForm.task1Name.value = record.task1Name;
  editDataForm.task2Name.value = record.task2Name;
  editDataForm.task3Name.value = record.task3Name;
  editDataForm.task4Name.value = record.task4Name;
  editDataForm.task5Name.value = record.task5Name;
  editDataForm.task6Name.value = record.task6Name;
  editDataForm.task7Name.value = record.task7Name;
  editDataForm.task1Json.value = record.task1Json;
  editDataForm.task2Json.value = record.task2Json;
  editDataForm.task3Json.value = record.task3Json;
  editDataForm.task4Json.value = record.task4Json;
  editDataForm.task5Json.value = record.task5Json;
  editDataForm.task6Json.value = record.task6Json;
  editDataForm.task7Json.value = record.task7Json;




  // leadingUnitList.value = record.leadingLeader.match(/[\u4e00-\u9fa5]+(?:\s[\u4e00-\u9fa5]+)*/g);
  // leadingDepartList.value = record.leadingUnit.match(/[\u4e00-\u9fa5]+(?:\s[\u4e00-\u9fa5]+)*/g);

}

const deleteItem = async(record:any) => {
    Modal.warning({
        title:"是否确认删除",
        titleAlign:"center",
        content: '此操作会永久删除该数据,是否确认要删除?',
        hideCancel:false,
        onOk(){
           postRequest("dsms/jyData/deleteData",{id:record.id}).then(res=>{
                fetchData();
           })
        }
    })
}

let renderData = ref<any[]>([]);

const jumpDowmTemp = ()=>{
  //  console.log(departmentName);
  //  window.location.href = baseURL + 'dsms/ihgDataProcess/downDataTemplate?department='+departmentName;
}


const fetchData = async () => {
  let res = await postRequest("dsms/jyReport/queryData", {
    prominentProblemList:formModel.prominentProblemList.value,
    problemTypeList:formModel.problemTypeList.value,
    bigTypeNameList:formModel.bigTypeNameList.value,
    department:formModel.department.value,
    pageSize: 9999
  });
  res.list.forEach((item:any,index:number)=>{
    if(item.task1Json !=null &&item.task1Json.length>10 && item.task1Json.indexOf("name") != -1){
        item.task1List = JSON.parse(item.task1Json);
      }
      if(item.task2Json !=null &&item.task2Json.length>10 && item.task2Json.indexOf("name") != -1){
        item.task2List = JSON.parse(item.task2Json);
      }
      if(item.task3Json !=null &&item.task3Json.length>10 && item.task3Json.indexOf("name") != -1){
        item.task3List = JSON.parse(item.task3Json);
      }
      if(item.task4Json !=null &&item.task4Json.length>10 && item.task4Json.indexOf("name") != -1){
        item.task4List = JSON.parse(item.task4Json);
      }
      if(item.task5Json !=null &&item.task5Json.length>10 && item.task5Json.indexOf("name") != -1){
        item.task5List = JSON.parse(item.task5Json);
      }
      if(item.task6Json !=null &&item.task6Json.length>10 && item.task6Json.indexOf("name") != -1){
        item.task6List = JSON.parse(item.task6Json);
      }
      if(item.task7Json !=null &&item.task7Json.length>10 && item.task7Json.indexOf("name") != -1){
        item.task7List = JSON.parse(item.task7Json);
      }
      if(item.regulationsPlanJson !=null &&item.regulationsPlanJson.length>10 && item.regulationsPlanJson.indexOf("name") != -1){
        item.establishedJson = JSON.parse(item.regulationsPlanJson);
        console.log(item.establishedJson);
        const result = item.establishedJson.map((task:any, i:number) => {
          const num = i + 1;
          let text = `${num}.${task.name}`;

          // 添加完成状态
          if (task.status === 1) text += "(已完成)";

          // 添加结尾符号
          if (i === 2) return text + "。";
          if (i === item.establishedJson.length - 1) return text;
          return text + "；";
        }).join("\n");
        item.establishedText = result
      }
  })
  renderData.value = res.list;
  totalSize.value = Number(res.total);
}
function jumpPage(val: any) {
  fetchData();
}
fetchData();
</script>
<script lang="ts">
export default {
  name: 'dataUpload',
};
</script>
  
<style scoped lang="less">
.container {
  padding: 3px 3px 3px 3px;
}
::v-deep(.arco-input-wrapper .arco-input[disabled]){
  color: #7d7d7d;
  -webkit-text-fill-color: #7d7d7d;
}
::v-deep(.arco-table .arco-table-td){
  font-size: 13px;
}
::v-deep(.arco-table .arco-table-th){
  font-size: 13px;
  padding: 5px;
}
::v-deep(.arco-table .arco-table-cell){
  padding: 0px;
}
table, th, td {
  border: 1px solid #e5e6eb;
}
.tablecss{
  width: 100%;border-collapse: collapse;table-layout: fixed;height: 100%;min-height: 67px;margin-top: -1px;
}

::v-deep(.arco-select-view-single.arco-select-view-disabled){
  color:#555
}
::v-deep(.arco-checkbox-disabled .arco-checkbox-label){
  color:#555
}

</style>